//模块名：普通搜索框2.0
//开发者：红烧猎人 	
//微信：95302870
//更新说明：后续优化代码
//示例传入数据：
//{'beijing':{'type':1,'value':'北京','data':'请输入'},'shanghai':{'type':2,'value':'沈阳','data':[{'key':'dadong','value':'大东区'},{'key':'shenhe','value':'沈河区'}]}}

layui.define(['form', 'layer', 'laytpl','jquery'], function(exports) { //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
	var form = layui.form, layer = layui.layer,laytpl = layui.laytpl,$=layui.jquery,i_search_best=0,comeon=false;
	var field;
	var _field=['field','word'],_width=300,_show=false,_title='搜索',_btn_yes='搜索',_btn_close='关闭';
	var elem='#search_by_95302870';
	var a={
		//初始化，必写
		init:function(obj){
			//字段数据
			field=obj.data;
			//自定义字段名称及关键字数据,默认['field','word']
			_field=obj.field==null?_field:obj.field;
			//对话框宽度，默认300
			_width=obj.width==null?_width:obj.width;
			//是否显示，默认false
			_show=obj.show==true?true:false;
			//标题，默认 搜索
			_title=obj.title==null?_title:obj.title;
			//搜索按钮的名字，默认 搜索
			_btn_yes=obj.btn_yes==null?_btn_yes:obj.btn_yes;
			//关闭按钮的名字，默认 关闭
			_btn_close=obj.btn_close==null?_btn_close:obj.btn_close;
			
			var s=function(returnData){
				form.on('submit(search_by_95302870)', function(data){
					returnData(data.field)
				});
			}
			if(obj.success){
				s(obj.success);
			}
			a.render(field);
		},
		
		//渲染主体结构
		render:function(data){
			var field_html;
			for (k in data) {
				field_html+='<option value="'+k+'">'+data[k]['value']+'</option>';
			}
			var display=_show?'disblock':'none';
			var style='position:fixed;left: calc(100% / 2 - '+_width/2+'px);top: calc(100% / 2 - 150px);width: '+_width+'px;height: 200px;box-shadow: 0px 3px 2px gainsboro;background: #eee;border:1px #c2c2c2 solid;border-radius:2px;display:'+display;
			var title_style='height: 40px;line-height: 40px;background: white;border-top-left-radius: 3px;border-top-right-radius: 3px;font-size: 16px;';
			var html='<div class="layui-form layui-anim layui-anim-scaleSpring search_by_95302870" id="search_by_95302870" action="" style="'+style+';">'+
				'<div style="'+title_style+'">&nbsp;&nbsp;'+
					_title+
				'</div>'+
				'<div style="padding: 5px;">'+
					'<div class="layui-form-item">'+
						'<select name="'+_field[0]+'" id="search_field_by_95302870" lay-filter="search_field_by_95302870">'+field_html+
						'</select>'+
						'<div id="search_value_by_95302870" style="margin-top:10px;height:40px">'+get_value_html(Object.keys(data)[0])+'</div>'+
						'<button class="layui-btn" style="float: right;margin-top: 20px;margin-left:5px" lay-submit="" lay-filter="search_by_95302870" >'+_btn_yes+'</button>'+
						'<button class="layui-btn" style="float: right;margin-top: 20px;" lay-submit="" lay-filter="search_close_by_95302870" >'+_btn_close+'</button>'+
					'</div>'+
				'</div>'+
			'</div>';
			
			
			$('body').after(html);
			form.render();
			return a;
		},
		show:function(r){
			if(r){
				$('#search_by_95302870').css('display','inline-block');
			}else{
				$('#search_by_95302870').css('display','none');
			}
		},
		success:function(returnData){////监听提交
			form.on('submit(search_by_95302870)', function(data){
				returnData(data.field)
			});
		}
	}
	
	//监听被选择
	form.on('select(search_field_by_95302870)', function(data){
		//console.log(data.value)
		var get_html=get_value_html(data.value);
		$('#search_value_by_95302870').html(get_html);
	  	form.render();
	});   
	
	/**
	 * 获得值得HTML结构,注意仅获得结构，不负责写入DOM
	 **/
	function get_value_html(field_name){
		if(field[field_name].type==1){
			var html='<input type="text" name="'+_field[1]+'" placeholder="'+field[field_name].data+'" autocomplete="off" class="layui-input">';
		  }else{
		  	var htmlSon='';
			var sondata=field[field_name].data
			for(k in sondata){
				htmlSon+='<option value="'+sondata[k]['key']+'">'+sondata[k]['value']+'</option>'
			}
			var html='<select name="'+_field[1]+'">'+htmlSon+'</select>';
		  }
		return html;
	}
	
	form.on('submit(search_close_by_95302870)', function(data){
		a.show(false);
	});
	//输出test接口
	exports('search_S', a);
});
/***********************
 * 更新日志：
 * 2018年9月29日 -- 2.0
 * 1.打开搜索框直接显示值的结构
 * 2.增加自定义搜索按钮和关闭按钮的名字
 * 
 * 
 **********************/
